<template>
    <div class="editor-border">
        <div class="editor-tool-bar">
            <Toolbar :editor="RefEditor" :defaultConfig="toolbarConfig" :mode="mode"/>
        </div>
        <div id="editor-content">
            <Editor v-model="text"
                    :defaultConfig="editorConfig"
                    :mode="mode"
                    @onCreated="onCreated"
                    @onChange="onChange"
                    @onDestroyed="onDestroyed"
                    @focus="Focus"
                    @blur="Blur"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {onBeforeMount, onMounted, onUnmounted, ref, shallowRef} from "vue";
import {Boot, DomEditor, IEditorConfig} from '@wangeditor/editor'
import markdownModule from '@wangeditor/plugin-md'
import {useEditorStore} from "../../../../../store/editor";
import {GetCount, GetSelectCount, LineHeight} from "./js/editorutil";

const toolbarConfig = ref({})
const editorConfig = ref({})
const RefEditor = shallowRef()
const mode = ref('mode')
const count = ref(0)
const selectCount = ref(0)
const editHeight = ref(0)
const refresh = ref(0)
const editorContent = useEditorStore()
const text = ref('')


function GetSize(width: number, height: number) {
    // editHeight.value = height
    console.log("width:", width, "height:", height)
}

function onCreated(editor) {
    RefEditor.value = editor
    let allMenuKeys = editor.getAllMenuKeys();
    console.log(allMenuKeys)

    // 必须这样获取...
    setTimeout(() => {
        const {$textArea} = DomEditor.getTextarea(editor)
        let id: string = $textArea!.attr('id')
        let elementById = document.getElementById(id)
        elementById!.style.height = '0'
        // 设置编辑器不自动换行
        elementById!.style.whiteSpace = 'nowrap'
    })

    // console.log(editor.getConfig().hoverbarKeys)
    editor.focus(true)
    // LineHeight(editor)
}

// 编辑器内容 调用,点击编辑器同样调用
function onChange(editor) {
    // let config = editor.getConfig();
    // console.log(config)

    // 统计文本字数
    count.value = GetCount(editor)
    // 统计选择文本字数
    selectCount.value = GetSelectCount(editor)
    // 获取文本 html 属性
    let html = editor.getHtml();
    let text=editor.getText()
    console.log(html)
    console.log(text)
    editorContent.Update(html)
    // LineHeight(editor)
}

// 销毁调用
function onDestroyed(editor) {
    if (editor !== null) {
        RefEditor.value = editor
        RefEditor.value.destroy()
    }
}

function Focus(focus) {
    console.log("onFocus")
}

function Blur(blur) {
    console.log("onBlur")
}

function click() {

}

function GetFocus() {
    RefEditor.value.focus()
}

onBeforeMount(() => {
    // 初始化编辑器配置
    let toolConfig = {
        excludeKeys: ['fullScreen', 'insertVideo', 'uploadVideo', 'editVideoSize', 'group-video']
    }

    let Config: Partial<IEditorConfig> = {
        MENU_CONF: {
            lineHeight: ['1', '1.5', '2', '2.5'],
            codeSelectLang: [
                {text: 'Go', value: 'go'},
            ]
        }
    }

    Config.scroll = true
    editorConfig.value = Config
    toolbarConfig.value = toolConfig
    // 添加 markdown 支持
    Boot.registerModule(markdownModule)
})

onMounted(() => {

})

onUnmounted(() => {

})

// 阻止浏览器默认 alt 按键出发导致编辑器无法编辑
document.onkeydown = (event) => {
    const isAlt = event.altKey || event.metaKey
    if (isAlt) {
        return false
    }
}
</script>

<style scoped>
.editor-border {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.editor-tool-bar {
    user-select: none;
}

#editor-content {
    flex: 1;
}
</style>